<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/homePage.css">
</head>

<body>
    <!-- 头栏与轮播图部分 -->
    <div class="topLunbo">
        <div class="photo">
            <span>北京</span>
            <span>六环内免费配送</span>
            <span>4006 106 798</span>
        </div>
        <div class="top">
            <div class="logo"><img src="./img/header_logo.png" alt="logo"></div>
            <div class="headBar">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">蛋糕</a></li>
                    <li><a href="#">下午茶</a></li>
                    <li><a href="#">精选食材</a></li>
                    <li><a href="#">最新活动</a></li>
                    <li><a href="#">企业专区</a></li>
                    <li><a href="#">会员中心</a></li>
                </ul>
            </div>
            <div class="user">
                <ul>
                    <li><a href="">登录</a></li>
                    <li>|</li>
                    <li><a href="">注册</a></li>
                    <li class="shop"><img src="./img/shop_bag.png" alt="购物"></li>
                </ul>
            </div>
        </div>
        <div class="btn">
            <a class="cur">1</a>
            <a>2</a>
            <a>3</a>
            <a>4</a>
        </div>
    </div>

    <!-- 人气推荐部分 -->
    <div class="recommend boxCenter">
        <div class="top">
            <span>人气推荐</span>
            <img src="./img/row_tit1.png" alt="">
            <span class="gd"><a href="#">更多</a></span>
        </div>
        <div class="bottom">
            <ul>
                <li>
                    <a href="#">
                        <img src="./img/small1.jpg" alt="">
                        <img class="bigImg" src="./img/big1.jpg" alt="">
                    </a>
                    <div class="text">
                        <span>桃芝</span>|<span>樱桃芝士蛋糕</span><br>
                        <span class="money">￥265</span>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/small1.jpg" alt="">
                        <img class="bigImg" src="./img/big1.jpg" alt="">
                    </a>
                    <div class="text">
                        <span>桃芝</span>|<span>樱桃芝士蛋糕</span><br>
                        <span class="money">￥265</span>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/small1.jpg" alt="">
                        <img class="bigImg" src="./img/big1.jpg" alt="">
                    </a>
                    <div class="text">
                        <span>桃芝</span>|<span>樱桃芝士蛋糕</span><br>
                        <span class="money">￥265</span>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/small1.jpg" alt="">
                        <img class="bigImg" src="./img/big1.jpg" alt="">
                    </a>
                    <div class="text">
                        <span>桃芝</span>|<span>樱桃芝士蛋糕</span><br>
                        <span class="money">￥265</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 庆生蛋糕部分 -->
    <div class="recommend boxCenter">
        <div class="top">
            <img src="./img/row_tit2.png" alt="">
            <span style="margin-left: 20px;">庆生蛋糕</span>
            <span class="gd"><a href="#">更多</a></span>
        </div>
        <div class="bottom">
            <ul>
                <li>
                    <a href="#">
                        <img src="./img/small1.jpg" alt="">
                        <img class="bigImg" src="./img/big1.jpg" alt="">
                    </a>
                    <div class="text">
                        <span>桃芝</span>|<span>樱桃芝士蛋糕</span><br>
                        <span class="money">￥265</span>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/small1.jpg" alt="">
                        <img class="bigImg" src="./img/big1.jpg" alt="">
                    </a>
                    <div class="text">
                        <span>桃芝</span>|<span>樱桃芝士蛋糕</span><br>
                        <span class="money">￥265</span>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/small1.jpg" alt="">
                        <img class="bigImg" src="./img/big1.jpg" alt="">
                    </a>
                    <div class="text">
                        <span>桃芝</span>|<span>樱桃芝士蛋糕</span><br>
                        <span class="money">￥265</span>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/small1.jpg" alt="">
                        <img class="bigImg" src="./img/big1.jpg" alt="">
                    </a>
                    <div class="text">
                        <span>桃芝</span>|<span>樱桃芝士蛋糕</span><br>
                        <span class="money">￥265</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 咖啡下午茶 -->
    <div class="recommend boxCenter">
        <div class="top">
            <span>咖啡下午茶</span>
            <img src="./img/row_tit1.png" alt="">
            <span class="gd"><a href="#">更多</a></span>
        </div>
        <div class="bottom">
            <ul>
                <li>
                    <a href="#">
                        <img src="./img/small2.jpg" alt="">
                        <img class="bigImg" src="./img/big2.jpg" alt="">
                    </a>
                    <div class="text">
                        <span>桃芝</span>|<span>樱桃芝士蛋糕</span><br>
                        <span class="money">￥265</span>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/small2.jpg" alt="">
                        <img class="bigImg" src="./img/big2.jpg" alt="">
                    </a>
                    <div class="text">
                        <span>桃芝</span>|<span>樱桃芝士蛋糕</span><br>
                        <span class="money">￥265</span>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/small2.jpg" alt="">
                        <img class="bigImg" src="./img/big2.jpg" alt="">
                    </a>
                    <div class="text">
                        <span>桃芝</span>|<span>樱桃芝士蛋糕</span><br>
                        <span class="money">￥265</span>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/small2.jpg" alt="">
                        <img class="bigImg" src="./img/big2.jpg" alt="">
                    </a>
                    <div class="text">
                        <span>桃芝</span>|<span>樱桃芝士蛋糕</span><br>
                        <span class="money">￥265</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 精选食材 -->
    <div class="recommend boxCenter">
        <div class="top">
            <img src="./img/row_tit2.png" alt="">
            <span style="margin-left: 20px;">精选食材</span>
            <span class="gd"><a href="#">更多</a></span>
        </div>
        <div class="bottom">
            <ul>
                <li>
                    <a href="#">
                        <img src="./img/small2.jpg" alt="">
                        <img class="bigImg" src="./img/big2.jpg" alt="">
                    </a>
                    <div class="text">
                        <span>桃芝</span>|<span>樱桃芝士蛋糕</span><br>
                        <span class="money">￥265</span>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/small2.jpg" alt="">
                        <img class="bigImg" src="./img/big2.jpg" alt="">
                    </a>
                    <div class="text">
                        <span>桃芝</span>|<span>樱桃芝士蛋糕</span><br>
                        <span class="money">￥265</span>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/small2.jpg" alt="">
                        <img class="bigImg" src="./img/big2.jpg" alt="">
                    </a>
                    <div class="text">
                        <span>桃芝</span>|<span>樱桃芝士蛋糕</span><br>
                        <span class="money">￥265</span>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/small2.jpg" alt="">
                        <img class="bigImg" src="./img/big2.jpg" alt="">
                    </a>
                    <div class="text">
                        <span>桃芝</span>|<span>樱桃芝士蛋糕</span><br>
                        <span class="money">￥265</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 瞬间 -->
    <div class="recommend boxCenter">
        <div class="top">
            <span>瞬间</span>
            <img src="./img/row_tit1.png" alt="">
            <span class="gd"><a href="#">更多</a></span>
        </div>
        <div class="bottom_sj">
            <ul>
                <li>
                    <img class="music" src="./img/music.jpg" alt="" srcset="">
                </li>
                <li>
                    <a href="#">
                        <img src="./img/order.jpg" alt="" srcset="">
                        <div class="box">蛋糕年度销量排行榜</div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <div class="footerNav">
            <ul class="clear">
                <li><a href="">关于我们</a></li>
                <li><a href="">最新活动</a></li>
                <li><a href="">企业专区</a></li>
                <li><a href="">公益合作</a></li>
                <li><a href="">招聘</a></li>
                <li><a href="">公众号</a></li>
            </ul>
            <p class="address">小蜜蜂蛋糕 提前3小时预订，北京市六环内免费配送 公司地址:北京市朝阳区798艺术区工美楼3层</p>

            <p class="copy">Copyright &copy; 2009-2019 ebeecake 易贝可（北京）食品有限公司 京ICP备09081733号 京公网安备110105014692<br>
                公司电话:4006106798 食品经营许可证:JY11105110232865 食品生产许可证:SC12411051114584</p>
        </div>
    </div>
    <!-- 视频播放 -->
    <div class="video">
        <video src="./music/new_vidio_1.mp4"></video>
        <span class="box_X">X</span>
    </div>
    <script src="./js/homePage.js"></script>
</body>

</html>